<script setup>
import { onUnmounted, ref } from 'vue'
import { loginAPI, registerAPI, getCodeAPI } from '@/api/login'
import { ElMessage } from 'element-plus'
import { useStuStore } from '@/stores'
import { useRouter } from 'vue-router'
import { checkPhone } from '@/utils/utils.js'

const router = useRouter()
const stuStore = useStuStore()
const formAcc = ref()
const formModelAcc = ref({
  user_name: '',
  password: '',
  phone: '',
  code: ''
})
const isPhoneDisabled = ref(false)

const formRules = {
  user_name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    },
    {
      pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur'
    },
    {
      validator: checkPhone,
      trigger: ['change', 'blur']
    }
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

// 注册
const register = async () => {
  const r = await formAcc.value.validate()
  if (!r) {
    return
  }
  const { data: res } = await registerAPI(formModelAcc.value)
  if (res.status === 200) {
    ElMessage.success(res.message)
    const { data: logRes } = await loginAPI(formModelAcc.value)
    if (logRes.status === 200) {
      localStorage.setItem('t', logRes.token)
      localStorage.setItem('uid', logRes.id)
      stuStore.getStudent()
      return router.replace('/')
    }
    return ElMessage.error(logRes.message)
  } else {
    ElMessage.error(res.message)
  }
}

// 获取验证码
let n = null
const time = ref(60)
const isDisabled = ref(false)
const getCode = async () => {
  const r = await formAcc.value.validateField(['phone'])
  if (!r) {
    return
  }
  const { data: res } = await getCodeAPI(formModelAcc.value.phone)
  if (res.status === 200) {
    ElMessage.success(res.message)
    isDisabled.value = true
    isPhoneDisabled.value = true
    n = setInterval(() => {
      time.value--
      if (time.value === 0) {
        isDisabled.value = false
        isPhoneDisabled.value = false
        time.value = 60
        clearInterval(n)
      }
    }, 1000)
  } else {
    ElMessage.error(res.message)
  }
}
onUnmounted(() => {
  clearInterval(n)
})
</script>

<template>
  <el-card class="container" shadow="hover">
    <template #header>
      <div class="header">注册</div>
    </template>
    <el-form :model="formModelAcc" :rules="formRules" ref="formAcc">
      <el-form-item prop="user_name">
        <el-input
          placeholder="账号"
          class="ipt"
          v-model="formModelAcc.user_name"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          placeholder="密码"
          type="password"
          show-password
          class="ipt"
          v-model="formModelAcc.password"
          maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item prop="phone" class="phone-item">
        <el-input
          placeholder="手机号"
          type="text"
          class="ipt"
          v-model="formModelAcc.phone"
          :disabled="isPhoneDisabled"
        ></el-input>
        <el-button
          style="margin-left: 0.1rem"
          :disabled="isDisabled"
          @click="getCode"
          >{{ time < 60 ? time : '获取验证码' }}</el-button
        >
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          placeholder="验证码"
          type="text"
          class="ipt"
          v-model="formModelAcc.code"
          maxlength="4"
          minlength="4"
        ></el-input>
      </el-form-item>

      <el-form-item class="btn-item">
        <el-button type="primary" class="btn" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
    <span class="register">
      已有账号
      <router-link to="/login">点击登录</router-link>
    </span>
  </el-card>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.16rem;
  border-radius: 0.18rem;

  .header {
    text-align: center;
    font-size: 0.2rem;
    font-weight: bold;
    color: #666;
    letter-spacing: 0.03rem;
  }

  .ipt {
    height: 0.4rem;
    font-size: 0.16rem;
  }

  .btn-item {
    :deep(.el-form-item__content) {
      justify-content: center;
    }

    .btn {
      width: 40%;
      height: 0.38rem;
    }
  }

  .phone-item {
    :deep(.el-form-item__content) {
      flex-wrap: nowrap;
    }
  }

  .register {
    font-size: 0.14rem;
    display: flex;
    width: 100%;
    justify-content: flex-end;

    a {
      margin-left: 0.04rem;
      color: #409eff;
    }
  }
}
</style>
